import BaseSprite from "../../Base/BaseSprite";
import CustomButton from "../../Common/CustomButton";
import { GlobalData } from "../../Common/GlobalData";
import { SceneGame } from "../../SceneGame";
import GameUtil from "../../Util/GameUtil";

const { ccclass, property } = cc._decorator;

interface IFindConfig {
    id: number;
    /** shows的索引 */
    show: number[];
    showIndex?: number;
    canClick: boolean;
    talk: string;
}

@ccclass
export default class FindUI extends BaseSprite {

    @property({ type: [cc.Node], tooltip: "可点击线索" })
    private clicks: cc.Node[] = [];
    @property({ type: [cc.Node], tooltip: "下方线索" })
    private finds: cc.Node[] = [];
    @property({ type: [cc.Node], tooltip: "展示的节点" })
    private shows: cc.Node[] = [];
    @property({ type: cc.Node, tooltip: "枕头" })
    private zhenTou: cc.Node = null;

    private index: number = -1;
    private complete: number[] = [];

    private configs: IFindConfig[] = [
        { id: 1, canClick: true, show: [], talk: '来的很块，像是有计划一样', },
        { id: 2, canClick: true, show: [], talk: '他们在翻找什么东西', },
        { id: 3, canClick: true, show: [], talk: '走的很匆忙，可能有目击者发现了他们', },
        // '纸条放大'
        { id: 4, canClick: true, show: [0], showIndex: 0, talk: '', },
        // '正', '反'
        { id: 5, canClick: false, show: [1, 2], showIndex: 0, talk: '为什么照片里的人跟我长得一模一样？', },
    ]
    private getConfigById(id: number) {
        const config = this.configs.find((o) => o.id === id);
        return config;
    }

    protected onLoad() {
        super.onLoad();

        this.init();
    }

    protected onEnable() {
        this.zhenTou.on(cc.Node.EventType.TOUCH_START, this.touchStart, this);
        this.zhenTou.on(cc.Node.EventType.TOUCH_MOVE, this.touchMove, this);
        this.zhenTou.on(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
        this.zhenTou.on(cc.Node.EventType.TOUCH_CANCEL, this.touchEnd, this);

        this.shows[1].on(cc.Node.EventType.TOUCH_START, this.touchStart, this);
        this.shows[1].on(cc.Node.EventType.TOUCH_MOVE, this.touchMove, this);
        this.shows[1].on(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
        this.shows[1].on(cc.Node.EventType.TOUCH_CANCEL, this.touchEnd, this);
    }
    protected onDisable() {
        this.zhenTou.off(cc.Node.EventType.TOUCH_START, this.touchStart, this);
        this.zhenTou.off(cc.Node.EventType.TOUCH_MOVE, this.touchMove, this);
        this.zhenTou.off(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
        this.zhenTou.off(cc.Node.EventType.TOUCH_CANCEL, this.touchEnd, this);

        this.shows[1].off(cc.Node.EventType.TOUCH_START, this.touchStart, this);
        this.shows[1].off(cc.Node.EventType.TOUCH_MOVE, this.touchMove, this);
        this.shows[1].off(cc.Node.EventType.TOUCH_END, this.touchEnd, this);
        this.shows[1].off(cc.Node.EventType.TOUCH_CANCEL, this.touchEnd, this);
    }

    private zhenTouData: { isClicked: boolean, canMove: boolean, isEnd: boolean } = { isClicked: false, canMove: false, isEnd: false };
    private zhaoPianData: { isClicked: boolean, canMove: boolean, isEnd: boolean } = { isClicked: false, canMove: false, isEnd: false };
    public touchStart(event: cc.Event.EventTouch) {
        if (event.target === this.zhenTou) {
            if (this.configs[4].canClick && !this.zhenTouData.isEnd) {
                this.zhenTouData.isClicked = true;
            } else {
                this.zhenTouData.isClicked = false;
            }
        } else if (event.target === this.shows[1]) {
            if (!this.zhaoPianData.isEnd) {
                this.zhaoPianData.isClicked = true;
            } else {
                this.zhaoPianData.isClicked = false;
            }
        }
    }
    public touchMove(event: cc.Event.EventTouch) {
        const pos = event.getLocation();
        const rootScale = SceneGame.instance.getRootScale();
        const x = (pos.x - GlobalData.stage_width / 2) / rootScale;
        const y = (pos.y - GlobalData.stage_height / 2) / rootScale;
        if (event.target === this.zhenTou) {
            if (this.zhenTouData.isClicked) {
                if (y - this.zhenTou.y > 50) {
                    this.zhenTouData.canMove = true;
                }
            }
        } else if (event.target === this.shows[1]) {
            if (this.zhaoPianData.isClicked) {
                if (x - this.shows[1].x > 50) {
                    this.zhaoPianData.canMove = true;
                }
            }
        }
    }
    public touchEnd(event: cc.Event.EventTouch) {
        if (event.target === this.zhenTou) {
            this.zhenTouData.isClicked = false;
            if (!this.zhenTouData.isEnd && this.zhenTouData.canMove) {
                this.zhenTouData.isEnd = true;
                cc.tween(this.zhenTou).to(0.3, { y: this.zhenTou.y + 100 }).start();
            }
        } else if (event.target === this.shows[1]) {
            this.zhaoPianData.isClicked = false;
            if (!this.zhaoPianData.isEnd && this.zhaoPianData.canMove) {
                this.zhaoPianData.isEnd = true;
                this.shows[1].active = false;
                this.shows[2].active = true;
            }
        }
    }

    private init() {
        for (let i = 0; i < this.finds.length; i++) {
            const find = this.finds[i];
            if (find) {
                cc.find('icon', find).active = false;
            }

            this.complete.push(0);
        }
    }

    private updateUI() {
        const click = this.clicks[this.index];
        if (click) {
            click.active = false;
        }

        const find = this.finds[this.index];
        if (find) {
            cc.find('icon', find).active = true;
        }

        for (let i = 0; i < this.shows.length; i++) {
            this.shows[i].active = false;
        }

        // 判断开启最后枕头下照片碎片
        let count = 0;
        this.complete[this.index] = 1;
        for (let i = 0; i < this.complete.length; i++) {
            if (this.complete[i] > 0) {
                count++;
            }
        }
        if (count === 4) {
            this.configs[count].canClick = true;
        }
        if (count === 5) {
            setTimeout(() => {
                this.node.destroy();
            }, 1000);
        }
    }

    private show(config: IFindConfig) {
        const click = this.clicks[this.index];
        if (click) {
            click.active = false;
        }

        const index = config.show[config.showIndex];
        for (let i = 0; i < this.shows.length; i++) {
            this.shows[i].active = i === index;
        }
    }

    private fly(node?: cc.Node) {
        const from = node || this.clicks[this.index];
        const to = this.finds[this.index];
        const dis = GameUtil.instance.getPointDistance(from, to);
        const scale = Math.min(100 / from.width, 100 / from.height);
        SceneGame.instance.showTopMask();
        cc.tween(from).sequence(
            cc.spawn(
                cc.moveTo(dis / 1000, cc.v2(from.x, from.y)),
                cc.moveTo(dis / 1000, cc.v2(to.x, to.y)),
                cc.scaleTo(dis / 1000, scale),
            ),
            cc.callFunc(() => {
                SceneGame.instance.hideTopMask();
                this.updateUI();
                this.index = -1;
            }),
        ).start();
    }

    public onBtnClicked(event: cc.Event.EventTouch) {
        // const name = event.target.name;
        for (let i = 0; i < this.clicks.length; i++) {
            if (event.target === this.clicks[i]) {
                this.index = i;
                const config = this.getConfigById(i + 1);
                if (config?.canClick) {
                    // 按钮禁用
                    const comp = this.clicks[this.index].getComponent(CustomButton);
                    if (comp) {
                        comp.enabled = false;
                    }

                    if (config.show.length > 0) {
                        this.show(config);
                        const index = config.show[config.showIndex];
                        if (this.shows[index]) {
                            this.shows[index].active = true;
                        }
                    } else {
                        this.fly();
                    }
                }
                break;
            }
        }
    }

    public onShowsClicked(event: cc.Event.EventTouch) {
        // 按钮禁用
        const comp = this.clicks[this.index].getComponent(CustomButton);
        if (comp) {
            comp.enabled = false;
        }

        // 纸片放大
        if (event.target === this.shows[0]) {
            this.index = 3;
            this.fly(this.shows[0]);
        }

        // 纸片放大
        if (event.target === this.shows[2]) {
            this.index = 4;
            this.fly(this.shows[2]);
        }
    }
}